/* eslint-disable react/prop-types */
import React, { useState, useEffect } from 'react';
import { EchartsComp } from './echarts';
import {
  DealElectLongTermPriceFocast,
  DealElectLongTermPriceFocast_shandong,
  DealElectLongSupplyForecast,
  DealElectHistoryBeforePrice,
  DealElectMarketSupplyDemandRelationship,
  DealElectSteamCoalMarket,
  DealElectMADC,
} from './helper';
import { useThemeChange } from '@/hooks';

export function ChartHistoryBeforePrice({ data = {}, scale = 1, getRef = () => {} }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...DealElectHistoryBeforePrice(data, scale) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...DealElectHistoryBeforePrice(data, scale) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} getRef={getRef} />;
}
export function ChartLongTermPriceFocast({ data = {}, scale = 1, getRef = () => {} }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...DealElectLongTermPriceFocast(data, scale) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...DealElectLongTermPriceFocast(data, scale) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} getRef={getRef} />;
}
export function ChartLongTermPriceFocast_shandong({ data = {}, scale = 1, getRef = () => {} }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...DealElectLongTermPriceFocast_shandong(data, scale) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...DealElectLongTermPriceFocast_shandong(data, scale) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} getRef={getRef} />;
}
export function ChartMarketSupplyDemandRelationship({ data = {}, scale = 1, getRef = () => {} }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...DealElectMarketSupplyDemandRelationship(data, scale) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...DealElectMarketSupplyDemandRelationship(data, scale) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} getRef={getRef} />;
}
export function ChartSteamCoalMarket({ data = {}, scale = 1, getRef = () => {} }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...DealElectSteamCoalMarket(data, scale) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...DealElectSteamCoalMarket(data, scale) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} getRef={getRef} />;
}
export function ChartDealElectMADC({ data = {}, scale = 1, getRef = () => {} }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...DealElectMADC(data, scale) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...DealElectMADC(data, scale) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} getRef={getRef} />;
}
export function ChartLongSupplyForecast({ data = {}, scale = 1, getRef = () => {} }) {
  const [config, setConfig] = useState();
  const { theme } = useThemeChange();
  useEffect(() => {
    setConfig({ ...DealElectLongSupplyForecast(data, scale) });
  }, [data]);
  useEffect(() => {
    setTimeout(() => {
      setConfig({ ...DealElectLongSupplyForecast(data, scale) });
    }, 1);
  }, [theme]);
  return <EchartsComp config={config} getRef={getRef} />;
}
